<template>
    <div class="box">
        <div class="nav">
            <span>题目Id:</span>

            <el-input style="width:250px" v-model="input1"></el-input>


            <span>题目内容:</span>
            <el-input style="width:250px" v-model="input2"></el-input>

            <span>年级:</span>
            <el-select v-model="value" placeholder="年级">
                <el-option v-for="item in options" @click.native="nianji(item)" :key="item.value" :label="item.value"
                    :value="item.label">
                </el-option>
            </el-select>

            <span>学科:</span>
            <el-select v-model="value1" placeholder="请选择">

            </el-select>


        </div>
        <div class="Question">
            <span>题型:</span>
            <el-select style="width:250px" v-model="value" placeholder="请选择">
                <el-option v-for="item in options1" :key="item.value" :label="item.value" :value="item.label">
                </el-option>
            </el-select>

            <el-button style="margin-left:10px;" @click="chaxun" type="primary">查询</el-button>


            <el-popover placement="bottom" title="" width="500" trigger="manual" content="danxu" v-model="visible">
                <el-button v-for="item, index in zhuanhuan" :key="index" style="margin-left:10px;" type="warning"
                    @click="tBtnClick(item)">{{ item.name }}</el-button>
                <el-button slot="reference" style="margin-left:10px;position: relative;" type="primary"
                    @click="visible = !visible">添加</el-button>
            </el-popover>

        </div>




        <div class="from_list">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed prop="id" label="Id" width="90">
                </el-table-column>
                <el-table-column prop="subjectId" label="学科" width="120">
                    <template slot-scope="scope">
                        <div v-for="item, index in arr2" :key="index">
                            <!-- 这是获取的学科数据 -->
                            <p v-if="item.id == scope.row.subjectId ? true : false">{{ item.name }} ({{ item.levelName }})
                            </p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="questionType" label="题型" width="70">
                </el-table-column>
                <el-table-column prop="shortTitle" label="题干" width="430">
                </el-table-column>
                <el-table-column prop="score" label="分数" width="50">
                </el-table-column>
                <el-table-column prop="difficult" label="难度" width="50">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="200">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="210">
                    <template slot-scope="scope">
                        <el-button size="small" @click="yulan(scope.row)">预览</el-button>
                        <el-button @click="handleClick(scope.row)" size="small">编辑</el-button>
                        <el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button>
                    </template>>
                </el-table-column>

                <!-- 弹出框 -->

            </el-table>
        </div>
        <div class="block" style=" margin-top:25px;margin-left:5px;">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage1" :page-sizes="[5, 10, 20, 30, 40, 50]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="0">
            </el-pagination>
        </div>

        <!-- 弹出框部分 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" >
            <div>
                <p v-if="list.title">{{ list.title }}</p>
                <span style="margin-left:10px;" v-for="(a,b) in list.items">{{a.prefix}}</span>

            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            input1: '',
            input2: '',
            options: [{
                value: '一年级',
                label: '1'
            }, {
                value: '二年级',
                label: '2'
            }, {
                value: '三年级',
                label: '3'
            }, {
                value: '四年级',
                label: '4'
            }, {
                value: '五年级',
                label: '5'
            }, {
                value: '六年级',
                label: '6'
            }, {
                value: '初一',
                label: '7'
            }, {
                value: '初二',
                label: '8'
            }, {
                value: '初三',
                label: '9'
            }, {
                value: '高一',
                label: '10'
            }, {
                value: '高二',
                label: '11'
            }, {
                value: '高三',
                label: '12'
            }],
            options1: [{
                value: '单选题',
                label: '1'
            }, {
                value: '多选题',
                label: '2'
            }, {
                value: '判断题',
                label: '3'
            }, {
                value: '填空题',
                label: '4'
            }, {
                value: '简单题',
                label: '5'
            }],
            zhuanhuan: [//这是转换的题型数据
                {
                    name: "单选题",
                    value1: 1,
                    src: '/exam/Single/list'
                }, {
                    name: "多选题",
                    value1: 2,
                    src: '/exam/Multiple/list'
                }, {
                    name: "判断题",
                    value1: 3,
                    src: '/exam/Judgment/list'
                }, {
                    name: "填空题",
                    value1: 4,
                    src: '/exam/Fillinthe/list'
                }, {
                    name: "简答题",
                    value1: 5,
                    src: '/exam/Short/list'
                }
            ],
            dialogVisible: false,
            IDD: [],
            tableData: [],
            arr2: [],
            list:[],
            value: '',
            value1: '',
            currentPage1: 1,
            flage: false,
            visible: false,

        }
    },
    methods: {
        handleClick(row){//点击编辑
            this.$store.commit("state",row)
            this.$router.push("/exam/Single/list")
        },
        remove(item){//点击删除数据
            console.log(item)
            this.axios({
                url:"/api/admin/question/delete/"+item.id,
                method:"post"
            }).then(res=>{
                this.tableData.splice(item,1)
                console.log(res)
            })
        },
        yulan(target) {//点击预览
            console.log(target)
            this.dialogVisible = !this.dialogVisible
            this.axios({
                url:"/api/admin/question/select/"+target.id,
                method:"post",                
            }).then(res=>{ 
                this.list = res.data.response
                console.log(this.list)
            })
        },
        //点击按钮跳转相对应的路径
        tBtnClick(item) {
            this.$store.commit("state",{})
            this.$router.push(item.src)
        },
        qiehuanyemian() {//点击是跳出弹出框 点击相对应的页面
            this.visible = !this.visible
        },



        dataList() {//将列表的数据封装为hanshu
            //列表数据
            let obj = {
                "id": null,
                "questionType": null,
                "level": null,
                "subjectId": null,
                "pageIndex": 1,
                "pageSize": 10,
            }
            this.axios({
                method: 'post',
                url: "/api/admin/question/page",
                data: obj
            }).then(res => {
                this.tableData = res.data.response.list
                this.tableData.forEach((item) => {
                    this.zhuanhuan.forEach((item1) => {
                        if (item.questionType == item1.value1) {
                            item.questionType = item1.name
                        }
                    })
                })
            })
        },
        chaxun() {
            let obj = {
                "id": this.input1,
                "questionType": null,
                "level": this.value,
                "subjectId": null,
                "pageIndex": 1,
                "pageSize": 10,
                "content": this.input2
            }
            this.axios({
                method: 'post',
                url: "/api/admin/question/page",
                data: obj
            }).then(res => {
                this.tableData = res.data.response.list
                // console.log(this.tableData)
                this.tableData.forEach((item) => {
                    this.zhuanhuan.forEach((item1) => {
                        if (item.questionType == item1.value1) {
                            item.questionType = item1.name
                        }
                    })
                })
            })
            //点击查询id效果
            this.tableData = this.tableData.filter((item) => {
                if (item.id == item.input1) {
                    return item
                }
            })
        },
        //年级查询
        nianji(item) {
            this.value = item.label
            // console.log(this.value);
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
        }
    },
    mounted() {

        this.dataList();//初始化进行调用

        //学科数据
        this.axios({
            url: "/api/admin/education/subject/list",
            method: "post"
        }).then(res => {
            this.arr2 = res.data.response;
            // console.log(this.arr2)
        })
    }
}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: calc(100vh - 105px);
    overflow-y: auto;

    .nav {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;

        span {
            color: #606266;
            margin-left: 10px;
            margin-right: 20px;
            font-size: 14px;
            font-weight: 700;
        }
    }

    .Question {
        // width: 100%;
        height: 70px;
        display: flex;
        align-items: center;

        span {
            color: #606266;
            margin-left: 10px;
            margin-right: 20px;
            font-size: 14px;
            font-weight: 700;
        }
    }

    .from_list {
        width: 98.7%;
        margin-left: 7px;
    }

    .tixing {
        width: 485px;
        height: 50px;
        line-height: 50px;
        margin-left: 200px;
        background: #fff;
        border: 1px solid #D2D8DE;
        border-radius: 5px;
    }
}
</style>
